<template>
  <el-form>
    <el-row class="borderCss">
      <el-row class="m-top10">
        <span>心理安全预警</span>
      </el-row>
      <el-row class="m-left20 m-top10">
        <el-col :span="14">
          <span>预警人数</span>
        </el-col>
        <el-col :span="10">
          <span>{{ levelNumber || 0 }}人</span>
        </el-col>
      </el-row>
    </el-row>
    <el-row class="borderCss">
      <el-row style="height: 200px">
        <div id="heartWarningPie" style="height: 300px"></div>
      </el-row>
    </el-row>
    <el-row class="m-top10 m-bottom10">
      <span>心理安全测评人数</span>
    </el-row>
    <el-row class="borderCss">
      <table border="1" class="table_style m-top20">
        <tbody>
          <tr class="headerCss">
            <td class="tableTdCss">年级</td>
            <td class="tableTdCss">各年级人数</td>
            <td class="tableTdCss">已测评</td>
          </tr>
          <tr
            v-for="(info, index) in levelGradeList"
            :key="index + 'a'"
            :class="index % 2 == 0 ? 'tableRowSingle' : 'tableRowDouble'"
          >
            <td class="tableTdCss">
              {{ levelGradeList[index].grade }}
            </td>
            <td class="tableTdCss">
              <el-col
                style="
                  color: #03a9f4;
                  text-decoration: underline;
                  cursor: pointer;
                "
                @click.native="
                  linkTo({ gradeName: levelGradeList[index].grade })
                "
              >
                {{ levelGradeList[index].num }}
              </el-col>
            </td>
            <td class="tableTdCss">
              <el-col
                style="
                  color: #03a9f4;
                  text-decoration: underline;
                  cursor: pointer;
                "
                @click.native="
                  linkTo({
                    gradeName: findGradeLevelNum1[index].grade,
                  })
                "
              >
                {{ levelGradeList[index].testNum }}
              </el-col>
            </td>
          </tr>
        </tbody>
      </table>
    </el-row>
    <el-row class="m-top10 m-bottom10">
      <span>心理安全预警</span>
    </el-row>
    <el-row class="borderCss">
      <table border="1" class="table_style m-top20">
        <tbody>
          <tr class="headerCss">
            <td class="tableTdCss">年级</td>
            <td class="tableTdCss">各年级人数</td>
            <td class="tableTdCss">预警人数</td>
          </tr>
          <tr
            v-for="(info, index) in findGradeLevelNum1"
            :key="index + 'aa'"
            :class="index % 2 == 0 ? 'tableRowSingle' : 'tableRowDouble'"
          >
            <td class="tableTdCss">
              {{ findGradeLevelNum1[index].grade }}
            </td>

            <td class="tableTdCss">
              <el-col
                style="
                  color: #03a9f4;
                  text-decoration: underline;
                  cursor: pointer;
                "
                @click.native="
                  linkTo({ gradeName: findGradeLevelNum1[index].grade })
                "
              >
                {{ findGradeLevelNum1[index].num }}
              </el-col>
            </td>
            <td class="tableTdCss">
              <el-col
                style="
                  color: #03a9f4;
                  text-decoration: underline;
                  cursor: pointer;
                "
                @click.native="
                  linkTo({
                    gradeName: findGradeLevelNum1[index].grade,
                    level: '1,2,3',
                  })
                "
              >
                {{ findGradeLevelNum1[index].levelNum }}
              </el-col>
            </td>
          </tr>
        </tbody>
      </table>
    </el-row>
    <el-row class="m-top10 m-bottom10">
      <span>干预年级分布</span>
    </el-row>
    <el-row class="borderCss">
      <table border="1" class="table_style m-top20">
        <tbody>
          <tr class="headerCss">
            <td class="tableTdCss">年级</td>
            <td class="tableTdCss">预警人数</td>
            <td class="tableTdCss">已干预人数</td>
            <td class="tableTdCss">未干预人数</td>
          </tr>
          <tr
            v-for="(info, index) in gradeList"
            :key="index"
            :class="index % 2 == 0 ? 'tableRowSingle' : 'tableRowDouble'"
          >
            <td class="tableTdCss">
              {{ gradeList[index].grade }}
            </td>
            <td class="tableTdCss">
              <el-col
                style="
                  color: #03a9f4;
                  text-decoration: underline;
                  cursor: pointer;
                "
                @click.native="
                  linkTo({
                    gradeName: gradeList[index].grade,
                    level: '1,2,3',
                  })
                "
              >
                {{ gradeList[index].levelNum }}
              </el-col>
            </td>
            <td class="tableTdCss">
              <el-col
                style="
                  color: #03a9f4;
                  text-decoration: underline;
                  cursor: pointer;
                "
                @click.native="
                  linkTo({
                    gradeName: gradeList[index].grade,
                    interveneFlag: 'Y',
                  })
                "
              >
                {{ gradeList[index].num }}
              </el-col>
            </td>
            <td class="tableTdCss">
              <el-col
                style="
                  color: #03a9f4;
                  text-decoration: underline;
                  cursor: pointer;
                "
                @click.native="
                  linkTo({
                    gradeName: gradeList[index].grade,
                    interveneFlag: 'N',
                  })
                "
              >
                {{ gradeList[index].noNum }}
              </el-col>
            </td>
          </tr>
        </tbody>
      </table>
    </el-row>
  </el-form>
</template>

<script>
import { mapGetters } from "vuex";
import * as echarts from "echarts";
export default {
  name: "thirdRegister",
  props: ["schoolDataObj"],
  data() {
    return {
      levelNumber: "",
      gradeList: [],
      levelGradeList: [],
      findGradeLevelNum1: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {},
  mounted() {
    this.schoolDataObj.findLevelAllNum.map((item) => {
      this.levelNumber = item.num;
    });
    let seriesData = [];
    let nameList = ["一级预警", "二级预警", "三级预警"];
    this.schoolDataObj.findLevelNum.map((item) => {
      seriesData.push({ value: item.num, name: nameList[item.code - 1] });
    });
    this.getSchoolPieInfo(seriesData);
    this.schoolDataObj.findGradeLevelNum.map((item) => {
      this.levelGradeList.push({
        grade: item.code,
        levelNum: item.levelNum,
        num: item.num,
        testNum: item.testNum,
      });
    });

    this.schoolDataObj.findGradeLevelNum1.map((item) => {
      this.findGradeLevelNum1.push({
        grade: item.code,
        levelNum: item.levelNum,
        num: item.num,
        testNum: item.testNum,
      });
    });

    this.schoolDataObj.findGradeLevelInterveneNum.map((item) => {
      this.gradeList.push({
        grade: item.code,
        levelNum: item.levelNum,
        num: item.num,
        noNum: item.noNum,
      });
    });
  },
  methods: {
    linkTo(params) {
      params.tenantId = this.schoolDataObj.tenantId;
      console.log(params);
      this.$router.push({
        name: "年级详情列表",
        query: params,
      });
    },
    getSchoolPieInfo(seriesData) {
      var chartDom = document.getElementById("heartWarningPie");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legendHoverLink: false,
        grid: {
          height: 200,
        },
        tooltip: {
          trigger: "item",
          formatter: "{a}<br />{b}: {c}({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "right",
          top: "10%",
          right: "10",
        },
        color: ["#FF4500", "#FFA07A", "#FFD700"],
        series: [
          {
            name: "心理安全预警",
            type: "pie",
            radius: ["20%", "35%"],
            center: ["35%", "30%"],
            data: seriesData,
            labelLine: {
              length: 7,
              length2: 5,
              show: true,
            },
            label: {
              // position: "inside",
              formatter: "{d}%",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
.textCenter {
  text-align: center;
}
.margin40 {
  margin: 40px;
}
.table_style td,
th {
  padding: 5px;
  font-size: 12px;
}
.table_style {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
.m-bottom30 {
  margin-bottom: 30px;
}
.m-left20 {
  margin-left: 20px;
}
.m-top20 {
  margin-top: 20px;
}
.m-top10 {
  margin-top: 10px;
}
.m-bottom10 {
  margin-bottom: 10px;
}
.borderCss {
  border-bottom: 6px solid #f0f0f0;
  border-right: -20px;
  margin-top: -20px;
}
.titleCss {
  margin-left: 10px;
  margin-top: 30px;
  font-weight: bold;
}
</style>
